{{ define "content" }}
    {{ partial "svg_sprite_icons/zhgh" }}
    {{ partial "svg_sprite_icons/number_square" }}
    <main class="pb-5 container-xxl" id="main">
        <div class="mx-auto py-5 col-12 col-md-10 col-lg-8 col-xxl-6">
            <form class="py-4" id="passwork_form">
                <div class="card">
                    <div class="card-body">
                        <div class="input-group mb-3">
                            <div class="form-floating">
                                <select class="form-select" name="jobName" id="throughSelect" aria-label="选择工种" required>
                                    <option value="" selected disabled>选择工种</option>
                                </select>
                                <label for="throughSelect">闯关工种</label>
                            </div>
                        </div>
                        <div class="input-group mb-2 flex-nowrap stepper-input user-select-none">
                            <label for="level" class="input-group-text">关数</label>
                            <div class="input-group-text decrease">
                                <svg class="bi bi-dash fs-2"><use href="#bi-dash"></use></svg>
                            </div>
                            <input type="number" name="level" class="input-group-text" min="1" max="30" step="1" value="0" id="level" required>
                            <div class="input-group-text increase">
                                <svg class="bi bi-plus fs-2"><use href="#bi-plus"></use></svg>
                            </div>
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" role="switch" id="automaticNextLevel">
                            <label class="form-check-label" for="automaticNextLevel">
                                <span class="switchEnableText">自动进入下一关</span>
                                <span class="switchDisableText">禁用自动闯关</span>
                            </label>
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-text w-100">
                                <input type="range" class="form-range" min="1" max="30" step="1" value="0" id="levels_range" aria-label="滑动选择关数">
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-3 flex-nowrap">
                            <span class="input-group-text">速度</span>
                            <span class="input-group-text flex-wrap row-cols-3 row-gap-2">
                        <input type="radio" class="btn-check" name="speed" value="19s" id="speed_19s">
                        <label class="btn btn-sm" for="speed_19s">19S</label>
                        <input type="radio" class="btn-check" name="speed" value="18s" id="speed_18s">
                        <label class="btn btn-sm" for="speed_18s">18S</label>
                        <input type="radio" class="btn-check" name="speed" value="17s" id="speed_17s">
                        <label class="btn btn-sm" for="speed_17s">17S</label>
                        <input type="radio" class="btn-check" name="speed" value="16s" id="speed_16s">
                        <label class="btn btn-sm" for="speed_16s">16S</label>
                        <input type="radio" class="btn-check" name="speed" value="15s" id="speed_15s">
                        <label class="btn btn-sm" for="speed_15s">15S</label>
                        <input type="radio" class="btn-check" name="speed" value="14s" id="speed_14s">
                        <label class="btn btn-sm" for="speed_14s">14S</label>
                        <input type="radio" class="btn-check" name="speed" value="13s" id="speed_13s">
                        <label class="btn btn-sm" for="speed_13s">13S</label>
                        <input type="radio" class="btn-check" name="speed" value="12s" id="speed_12s">
                        <label class="btn btn-sm" for="speed_12s">12S</label>
                        <input type="radio" class="btn-check" name="speed" value="11s" id="speed_11s">
                        <label class="btn btn-sm" for="speed_11s">11S</label>
                        <input type="radio" class="btn-check" name="speed" value="10s" id="speed_10s">
                        <label class="btn btn-sm" for="speed_10s">10S</label>
                        <input type="radio" class="btn-check" name="speed" value="9s" id="speed_9s">
                        <label class="btn btn-sm" for="speed_9s">9S</label>
                        <input type="radio" class="btn-check" name="speed" value="8s" id="speed_8s">
                        <label class="btn btn-sm" for="speed_8s">8S</label>
                        <input type="radio" class="btn-check" name="speed" value="7s" id="speed_7s">
                        <label class="btn btn-sm" for="speed_7s">7S</label>
                        <input type="radio" class="btn-check" name="speed" value="6s" id="speed_6s">
                        <label class="btn btn-sm" for="speed_6s">6S</label>
                        <input type="radio" class="btn-check" name="speed" value="5s" id="speed_5s">
                        <label class="btn btn-sm" for="speed_5s">5S</label>
                        <input type="radio" class="btn-check" name="speed" value="4s" id="speed_4s">
                        <label class="btn btn-sm" for="speed_4s">4S</label>
                        <input type="radio" class="btn-check" name="speed" value="3s" id="speed_3s">
                        <label class="btn btn-sm" for="speed_3s">超快</label>
                        <input type="radio" class="btn-check" name="speed" value="2s" id="speed_2s">
                        <label class="btn btn-sm" for="speed_2s">更快</label>
                        <input type="radio" class="btn-check" name="speed" value="s" id="speed_s">
                        <label class="btn btn-sm" for="speed_s">较快</label>
                        <input type="radio" class="btn-check" name="speed" value="base" id="speed_base" required checked>
                        <label class="btn btn-sm" for="speed_base">默认</label>
                        <input type="radio" class="btn-check" name="speed" value="xl" id="speed_xl">
                        <label class="btn btn-sm" for="speed_xl">较慢</label>
                        <input type="radio" class="btn-check" name="speed" value="2xl" id="speed_2xl">
                        <label class="btn btn-sm" for="speed_2xl">更慢</label>
                        <input type="radio" class="btn-check" name="speed" value="3xl" id="speed_3xl">
                        <label class="btn btn-sm" for="speed_3xl">超慢</label>
                        <input type="radio" class="btn-check" name="speed" value="4xl" id="speed_4xl">
                        <label class="btn btn-sm" for="speed_4xl">4XL</label>
                        <input type="radio" class="btn-check" name="speed" value="5xl" id="speed_5xl">
                        <label class="btn btn-sm" for="speed_5xl">5XL</label>
                        <input type="radio" class="btn-check" name="speed" value="6xl" id="speed_6xl">
                        <label class="btn btn-sm" for="speed_6xl">6XL</label>
                        <input type="radio" class="btn-check" name="speed" value="7xl" id="speed_7xl">
                        <label class="btn btn-sm" for="speed_7xl">7XL</label>
                    </span>
                        </div>
                        <div class="d-grid col-6 mx-auto">
                            <button class="btn btn-primary" type="submit">开始答题</button>
                        </div>
                    </div>
                </div>
            </form>
            <div class="card">
                <div class="card-body">
                    <div class="input-group flex-nowrap stepper-input user-select-none justify-content-center">
                        <label class="input-group-text" for="loop">循环次数</label>
                        <div class="input-group-text decrease">
                            <svg class="bi bi-dash fs-2"><use href="#bi-dash"></use></svg>
                        </div>
                        <input class="input-group-text" type="number" value="15" id="loop" min="1" max="30" step="1" maxlength="2">
                        <div class="input-group-text increase">
                            <svg class="bi bi-plus fs-2"><use href="#bi-plus"></use></svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{ partial "zhgh/result" }}
        {{ partial "zhgh/page_tools" }}
    </main>
{{ end }}